<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>搜索</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
</head>
<body>
	<div id="container" style="padding-top:10px;">
		<div class="search-wrap">
			<input class="search-top" :class="{active:inputFocus}" v-model="inputValue" type="search" @keyup.enter="searchBtn">
			<p :class="{active:inputFocus}"><span class="iconfont">&#xe601;</span>{{inputText}}</p>
			<button type="button" v-if="inputFocus" @click="backHref">取消</button>
		</div>

		<div class="search-list-wrap">
			<h3>搜索结果</h3>
			<!-- <p>您要找的是不是一下产品</p> -->
			<div class="search-list" v-for="item in proList">
				<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
					{{item.name}}
				</a>
			</div>
		</div>
		<div class="empetDate">
			<span class="iconfont">&#xe602;</span>
			抱歉！没找到更多数据
		</div>
	</div>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:"#container",
	data:{
		inputFocus:false,
		inputText:'大家都在搜：银行理财',
		counter:1,
		inputValue:'',
		page:1,
		pageCount:'',
		idStr:'',
		proList:[],
	},
	mounted:function(){
		this.$nextTick(function(){
			vm.init();
			refresh(this.refreshData());    //监听滚动到底部->触发refreshData()
			vm.inputValue = decodeURI(vm.getParameter('keyWord'));
			vm.getList();
			vm.inputFocus = true;
			vm.inputText = '';
		})
	},
	methods:{
		init:function(){
			var searchInput = document.querySelector('.search-top');
			searchInput.onfocus = function(){
				vm.inputFocus = true;
				vm.inputText = '';
			}
			searchInput.onblur = function(){

			}
		},
		getList:function(){
			loader.init();
			if(vm.inputValue == '') toast('请输入搜索条件');
			get('/product/query-product',{
				nameOrCode:vm.inputValue,
				currentPage:vm.page
			},function(res){
				console.log(res.data.resultList);
				vm.pageCount = res.data.totalCount/res.data.pageSize;
				vm.proList = vm.proList.concat(res.data.resultList);
				if(res.data.resultList.length == 0){
					refreshText('到底了哦！')
				}else{
					refreshText('上拉加载更多数据')
				}
				if(vm.proList.length == 0){
					document.querySelector('.empetDate').style.display = 'block';
					refreshText('')
				}else{
					document.querySelector('.empetDate').style.display = 'none';
				}
				if(vm.proList.length <5){
					refreshText('')
				}
				loader.remove();
			})
		},
		searchBtn:function(){
			vm.page = 1;
			vm.proList = [];
			vm.getList();
		},
		refreshData:function(){
			return function(){
				if(vm.page > vm.pageCount){
					refreshText('到底了哦！')
				}else {
					vm.page++;
					vm.getList();
				}
			}
		},
		getParameter:function(name){
			var reg = new RegExp("(^|&)" + name +"=([^&]*)(&|$)","i");
			var r = window.location.search.substr(1).match(reg);
			if (r!=null) return (r[2]); return null;
		},
		backHref:function(){
			window.history.go(-1);
		}
	},
	filters:{
		changeUrl:function(category,fundType,idStr){
			switch (category) {
				case 'BANK_FINANCIAL':
					return 'product_2_detail.html?idStr='+idStr;
					break;
				case 'PUBLIC_FUND':
					if(fundType == 'MONETARY_FUND'){
						return 'product_3_detail_1.html?idStr='+idStr;
					}
					else{
						return 'product_3_detail.html?idStr='+idStr;
					}
					break;
				case 'INSURANCE':
					return 'product_4_detail.html?idStr='+idStr;
					break;
				case 'PRIVATE_EQUITY':
					return 'product_5_detail.html?idStr='+idStr;
					break;

			}
		}
	}
})
</script>
</body>
</html>
